/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useState } from "react";
import { Table, Space } from "antd";
import { accountCate } from "../../config/enums";
import { PriceForm } from "./PriceForm";

export function ExpandedRowRender(props) {
  const [show, showState] = useState(false);
  const [price, priceState] = useState({});

  const handleChangePrice = (e) => {
    showState(true);
    priceState(e);
  };
  const closePrice = () => {
    showState(false);
  };
  const refresh = () => {
    props.refresh();
  };
  const handleDeletePrice = (e) => {
    props.deleteItem(e);
  };
  const columns = [
    {
      title: "付款方式",
      dataIndex: "accountCate",
      key: "accountCate",
      render: (e) => <div>{accountCate[e]}</div>,
    },
    { title: "价格", dataIndex: "price", key: "price" },
    {
      title: "操作",
      dataIndex: "",
      key: "operation",
      render: (e) => (
        <Space size="middle">
          <a
            onClick={() => {
              handleChangePrice(e);
            }}
          >
            修改
          </a>
          <a
            onClick={() => {
              handleDeletePrice(e);
            }}
          >
            删除
          </a>
        </Space>
      ),
    },
  ];
  return (
    <div>
      <PriceForm
        show={show}
        refresh={refresh}
        formData={price}
        close={closePrice}
      ></PriceForm>
      <Table
        rowKey={(data) => data.id}
        columns={columns}
        dataSource={props.formData}
        pagination={false}
      />
    </div>
  );
}
